<!-- 组件说明 -->
<template>
  <el-tabs v-model="activeFNodeId" class="topology-plan-h5" @tab-click="firstNodeChange">
    <el-tab-pane :label="item.textMap.NAME" :name="item.csCommId" v-for="item in nodeList">
      <el-select
        v-model="activeSecondNodeId"
        :placeholder="select"
        size="large"
        @change="selcetChange"
        v-if="item.secondNodeList.length > 0"
      >
        <el-option
          v-for="second in item.secondNodeList"
          :key="second.csCommId"
          :label="second.textMap.NAME"
          :value="second.csCommId"
        />
      </el-select>
      <div v-else class="no-data">{{ nodata }}</div>
      <ThirdNode
        v-for="(third, tIndex) in activeSecondNode.thirdNodeList"
        :key="tIndex"
        :thirdData="third"
      />
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
import { onMounted, ref, watch, reactive } from 'vue'
import { fetchData, insertShareInfo, fetchShareInfo } from '@/api/qygly'
import { useRoute } from 'vue-router'
import ThirdNode from './thirdNode.vue'
import { reqAllPlan } from '@/api/config/plan'
import { riskColor } from './index'
// const selectValue = ref('')
const recordList = ref([])

const activeFNodeId = ref('')
const activeSecondNode = ref({})
const activeSecondNodeId = ref('')

import { usePltI18nStore } from '@/stores/i18n-plt'
const pltI18nStore = usePltI18nStore()

const {shareBtn} = pltI18nStore.pltI18n.cisdi.gczx.frontEnd.common
const {nodata, select} = pltI18nStore.pltI18n.cisdi.gczx.frontEnd.topo

// 切换tab,也就是一级节点改变
const firstNodeChange = (tab) => {
  const currentFirst = nodeList.value.find((item) => item.csCommId == tab.props.name)
  const { secondNodeList } = currentFirst
  activeSecondNode.value = secondNodeList[0]
  if (secondNodeList.length > 0) {
    selcetChange(activeSecondNode.value)
  } else {
    activeSecondNode.value = {}
  }
  activeSecondNodeId.value = activeSecondNode.value.csCommId
  console.log(112233, activeSecondNode.value, activeSecondNodeId.value)
}
const selcetChange = (value) => {
  nodeList.value.map((node) => {
    node.secondNodeList.map((second) => {
      if (second.csCommId == value) {
        activeSecondNode.value = second
      }
    })
  })
}
const route = useRoute()
const req = ref({})
const nodeList = ref([])

const getData = async () => {
  // 获取数据
  const res = await fetchData(req.value)
  const { entityRecordList } = res
  const firstNodeList = entityRecordList.filter((item) => {
    if (item.textMap.CC_PRJ_STRUCT_NODE_PID == undefined) {
      return item
    } else {
      const findParent = entityRecordList.find(
        (record) => record.valueMap.ID == item.valueMap.CC_PRJ_STRUCT_NODE_PID,
      )
      if (!findParent) {
        return item
      }
    }
  })
  firstNodeList.map((first) => {
    const secondNodeList = entityRecordList.filter(
      (item) => item.valueMap.CC_PRJ_STRUCT_NODE_PID == first.valueMap.ID,
    )
    secondNodeList.map((second) => {
      const thirdNodeList = entityRecordList.filter(
        (item) => item.valueMap.CC_PRJ_STRUCT_NODE_PID == second.valueMap.ID,
      )
      second.thirdNodeList = thirdNodeList
    })
    first.secondNodeList = secondNodeList
  })
  nodeList.value = firstNodeList
  activeFNodeId.value = nodeList.value[0]?.csCommId || ''
  activeSecondNode.value = nodeList.value[0]?.secondNodeList[0] || {}
  activeSecondNodeId.value = nodeList.value[0]?.secondNodeList[0]?.csCommId || ''
  const height = document.documentElement.scrollHeight + 100
  setTimeout(() => {
    const data1 = {
      mark: 'QYGLY',
      iframeId: route.query.iframeId,
      isReqOrResp: true,
      type: 'SIZE_CHANGED',
      commId: 'SIZE_CHANGED',
      content: {
        height: height + 'px',
      },
    }
    window.parent.postMessage(data1, '*')
  }, 1000)
}

if (route.query.shareId) {
  // 若为查看共享的数据：
  onMounted(() => {
    fetchShareInfo({
      orgId: route.query.orgId,
      id: route.query.shareId,
    }).then((result) => {
      console.log(1122, JSON.parse(result.shareContextData))
      // nodeList.value = JSON.parse(result.shareContextData).nodeList
      recordList.value = JSON.parse(result.shareContextData).recordList

      const firstNodeList = recordList.value.filter((item) => {
        if (item.textMap.CC_PRJ_STRUCT_NODE_PID == undefined) {
          return item
        } else {
          const findParent = recordList.value.find(
            (record) => record.valueMap.ID == item.valueMap.CC_PRJ_STRUCT_NODE_PID,
          )
          if (!findParent) {
            return item
          }
        }
      })
      firstNodeList.map((first) => {
        const secondNodeList = recordList.value.filter(
          (item) => item.valueMap.CC_PRJ_STRUCT_NODE_PID == first.valueMap.ID,
        )
        secondNodeList.map((second) => {
          const thirdNodeList = recordList.value.filter(
            (item) => item.valueMap.CC_PRJ_STRUCT_NODE_PID == second.valueMap.ID,
          )
          second.thirdNodeList = thirdNodeList
        })
        first.secondNodeList = secondNodeList
      })
      nodeList.value = firstNodeList
      console.log('🚀 ~ onMounted ~ nodeList.value:', nodeList.value)
      activeFNodeId.value = nodeList.value[0].csCommId
      if (nodeList.value[0].secondNodeList.length > 0) {
        activeSecondNode.value = nodeList.value[0].secondNodeList[0]
        activeSecondNodeId.value = activeSecondNode.value.csCommId
      }

      const height = document.documentElement.scrollHeight + 100
      setTimeout(() => {
        const data1 = {
          mark: 'QYGLY',
          iframeId: route.query.iframeId,
          isReqOrResp: true,
          type: 'SIZE_CHANGED',
          commId: 'SIZE_CHANGED',
          content: {
            height: height + 'px',
          },
        }
        window.parent.postMessage(data1, '*')
      }, 1000)
    })
  })
} else {
  onMounted(() => {
    req.value = {
      ...reqAllPlan,
      sevId: route.query.sevId, // 通过路由区分现行计划、历史计划，具体值在企业云里配置
    }
    if (import.meta.env.MODE === 'development') {
      getData()
    }
    const { iframeId } = route.query
    const data = {
      mark: 'QYGLY',
      iframeId,
      isReqOrResp: true,
      type: 'READY_TO_FETCH',
      commId: 'READY_TO_FETCH',
    }
    window.parent.postMessage(data, '*')

    const data1 = {
      mark: 'QYGLY',
      iframeId: route.query.iframeId,
      isReqOrResp: true,
      type: 'SIZE_CHANGED',
      commId: 'SIZE_CHANGED',
      content: {
        height: '800px',
      },
    }
    window.parent.postMessage(data1, '*')
  })
}

// 接收企业云的数据
window.addEventListener(
  'message',
  async (e) => {
    console.info('cisdi-gantt收到的message', e.data)
    req.value = {
      ...reqAllPlan,
      ...e.data.content, //企业云postmessage发过来的数据
      sevId: route.query.sevId, // 通过路由区分现行计划、历史计划，具体值在企业云里配置
    }

    if (e.data.mark !== 'QYGLY' || e.data.type == 'SIZE_CHANGED') {
      return
    } else {
      // 路由有shareId的话不请求数据，没有shareId则请求数据
      if (!route.query.shareId) {
        getData()
      }
    }
  },
  false,
)
</script>

<style lang="scss" src="">
$single-width: 270px;
.topology-plan-h5 {
  .no-data {
    font-size: 12px;
    color: #555;
    text-align: center;
  }
  .third-node {
    width: $single-width;
    margin: 25px auto;
  }
  .el-select {
    width: 80%;
    margin: 0 10%;
  }
}
</style>
